<template>
	<view>
		<view class="container">
			<view class="card p-4 my-3 top-header">
				<img class="ico-img" src="https://wuliu.suchenqiang.cn/static/imgsrc/notice2.png" alt="">
				<view>
					下单后主动给快递员打电话
				</view>
			</view>
			<view class="card mail-info my-3">
				<view class="sending">
					<view class="icon">寄</view>
					<view class="ss-flex-col ss-flex-1 pr-2" @tap="toAddPage(1)">
						<template v-if="shippingInfo.isSet">
							<text class="basic">
								<text class="mr-2">{{shippingInfo.name}}</text>
								<text>{{shippingInfo.tel}}</text>
							</text>
							<text class="address">
								<text class="mr-2">{{shippingInfo.area}}</text>
								<text>{{shippingInfo.address}}</text>
							</text>

						</template>
						<template v-else>
							<text class="basic">寄件人信息</text>
							<text class="address">请输入您的寄件地址信息</text>
						</template>
					</view>
					<view class="book" @tap="toAddPage(1)">地址薄</view>
				</view>
				<view class="receiving">
					<view class="icon">收</view>
					<view class="ss-flex-col ss-flex-1 pr-2" @tap="toAddPage(2)">
						<template v-if="receivingInfo.isSet">
							<text class="basic">
								<text class="mr-2">{{receivingInfo.name}}</text>
								<text>{{receivingInfo.tel}}</text>
							</text>
							<text class="address">
								<text class="mr-2">{{receivingInfo.area}}</text>
								<text>{{receivingInfo.address}}</text>
							</text>

						</template>
						<template v-else>
							<text class="basic">收件人信息</text>
							<text class="address">请输入您的收件地址信息</text>
						</template>
					</view>
					<view class="book" @tap="toAddPage(2)">地址薄</view>
				</view>
			</view>
			<view class="card tip p-3 my-3">
				请务必认真填写收寄件人信息，如出现因信息错误导致快件无法准确送达，责任由寄件人自行承担
			</view>
			<view class="card tip p-3 my-3">
				快递在运输中才会显示快递运单号,如已经完成取件还未显示快递运单号情况，请查看是否需要补充运费超重差价，或者联系客服。
			</view>
			<view class="card package1 package-box my-3 p-4">
				<view class="ss-flex ss-row-between">
					<text class="label">上门时间</text>
					<view class="option" @tap="openPopup">
						{{ dateTime || '请选择' }}
						<text class="cicon-forward"></text>
					</view>
				</view>
				<view class="ss-flex ss-row-between">
					<text class="label">包裹信息<text class="require">(必填)</text></text>
					<view class="option" @tap="setPackage">
						{{ packageInfo.itemName }}，{{ packageInfo.weight }}KG
						<text class="cicon-forward"></text>
					</view>
				</view>
				<view class="tip">
					请务必选择包裹然后才会显示价格哦！！！如果没有快递员来取件，可以去我的中寄件订单主动给快递员打电话哦！下午五点半以后的订单可能会延至第二天哦！寄件不成功的话，请更换别的快递！！！
				</view>
			</view>

			<!-- <view v-else class="add-box" @tap="handleAdd">+添加收件人</view> -->

			<view v-if="list.length" class="card express-delivery my-3">
				<view class="title">
					选择快递
					<text class="tip">（建议选择平时取件率高的快递）</text>
				</view>
				<view class="express-delivery-list">
					<view v-for="item in list" :key="item.channelId" class="express-delivery-item"
						:class="{'active': item.channelId == active.channelId}" @tap="setKuaidiAct(item)">
						<view class="ss-flex mb-2">
							<image class="logo" :src="item.channelLogoUrl"></image>
							<text class="name">{{ item.tagType }}</text>
							<text class="tip">{{ item.channel }}</text>
						</view>
						<view class="ss-flex baseline">
							<text class="price">¥ <text class="num">{{ item.totalFreight }}</text></text>
							<text class="priceMore">续重¥<text class="red">{{ item.priceMore }}</text>/kg</text>
							<text class="original" v-if="item.originalPrice">官网原价¥{{ item.originalPrice }}</text>

						</view>
						<view v-if="userinfo.zhekou>=100" class="ss-flex baseline">
							<text
								class="original">会员价：¥{{(userinfo.zuigaozhekou* item.totalFreight/100).toFixed(2)}}</text>
							<view @click="shengji" class="openvip">升级会员</view>
						</view>
						<view v-else class="ss-flex baseline">
							<text
								class="priceMore">会员优惠：-¥{{((100-userinfo.zhekou)*item.totalFreight/100).toFixed(2)}}</text>
						</view>
						<view class="selected">
							✔
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="ss-flex mb-2">
				<view class="left-box">
					<view class="price">预计：{{ (active.totalFreight*(userinfo.zhekou/100)).toFixed(2) }}元</view>
					<view class="tip mb-1">
						正确设置寄收地址和物品信息才会出现价格哦，实际以官方价格为准
					</view>
				</view>
				<button class="button" @tap="SubmitOrder">提交</button>
			</view>
			<view class="agreement ss-flex">
				<uni-data-checkbox selectedColor="#45be93" multiple v-model="checkbox"
					:localdata="range"></uni-data-checkbox>
				<navigator url="/pages/article/detail?id=1">
					<text class="blue">《寄件服务协议》</text>
				</navigator>
			</view>
		</view>
		<uni-data-picker v-show="isPicker" ref="picker" :localdata="columnData" popup-title="请选择取件时间"
			@change="bindChange"></uni-data-picker>
		<loading v-if="loading"></loading>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading: false,
				data: [],
				shippingInfo: {
					isSet: '',
					address: "",
					aid: '',
					area: "",
					city: "",
					district: "",
					name: "",
					province: "",
					tel: ""
				},
				receivingInfo: {
					isSet: '',
					address: "",
					aid: '',
					area: "",
					city: "",
					district: "",
					name: "",
					province: "",
					tel: ""
				},
				dateTime: '',
				packageInfo: {
					itemName: '日用品',
					weight: 1,
					vloumLong: '1',
					vloumWidth: '1',
					vloumHeight: '1',
					billRemark: ''
				},
				active: {
					totalFreight: '',
					channelId: ''
				},
				userinfo: {
					zhekou: 100,
					zuigaozhekou: 98
				},
				checkbox: '',
				range: [{
					"value": 0,
					"text": "我愿遵守平台协议"
				}],
				currentIndex: [0, 0],
				columnData: [],
				pingType: 1,
				list: [],
				isPicker:false
			};
		},
		onLoad: function(opt) {

		},
		methods: {
			timeComparison(end_time) {
				const date = new Date();
				const start_time = date.getHours()
				if (start_time >= end_time) {
					return true
				}
				return false
			},
			SubmitOrder() {
				let that = this;
				if (that.checkbox == '') {
					app.error('请勾选平台协议');
				} else if (that.shippingInfo.isSet == '') {
					app.error('请填写寄件人信息');
				} else if (that.receivingInfo.isSet == '') {
					app.error('请填写收件人信息');
				} else if (that.dateTime == '') {
					app.error('请选择上门取件时间');
				}else if(that.active.channelId=='') {
					app.error('请选择快递');
				}else {
					that.loading = true;
					app.showLoading('提交订单中...')
					app.post('ApiKuaidi/subOrderKuaidi', {
						...that.setPapmer(),
						channelId: that.active.channelId,
						pickupStartTime: that.currentIndex.join(),
						channelSubTag:that.active.tagType
					}, function(res) {
						app.showLoading(false);
						that.loading = false;
						if (res.status == 0) {
							app.error(res.msg);
							return;
						}else if(res.status == 2){
							app.error(res.msg);
							setTimeout(function(){
								app.goto('/kuaidi/freight/buchajia', 'redirectTo');
							},1500)
							return;
						}
						app.goto('/pages/pay/pay?id=' + res.payorderid, 'redirectTo');
						that.loaded();
					});
				}
			},
			setKuaidiAct(obj) {
				this.active = obj;
			},
			setPapmer() {
				let that = this;
				let pamper = {
					sender: that.shippingInfo.name,
					senderMobile: that.shippingInfo.tel,
					senderCity: that.shippingInfo.city,
					senderCounty: that.shippingInfo.district,
					senderProvince: that.shippingInfo.province,
					senderLocation: that.shippingInfo.address,
					senderAddress: that.shippingInfo.area.replaceAll('-', '') + that.shippingInfo.address,
					receiver: that.receivingInfo.name,
					receiverMobile: that.receivingInfo.tel,
					receiveCity: that.receivingInfo.city,
					receiveCounty: that.receivingInfo.district,
					receiveProvince: that.receivingInfo.province,
					receiveLocation: that.receivingInfo.address,
					receiveAddress: that.receivingInfo.area.replaceAll('-', '') + that.receivingInfo.address,
					...that.packageInfo
				}
				return pamper;
			},
			getKuaiList() {
				let that = this;
				that.loading = true;
				app.showLoading('优惠询价中')
				app.post('ApiKuaidi/selectKuaidi', that.setPapmer(), function(res) {
					app.showLoading(false);
					that.loading = false;
					if (res.code == '1') {
						that.list = res.result;
						that.userinfo = res.userinfo;
					}
					that.loaded();
				});
			},
			setChanneid(obj) {
				this.active.channelId = item.channelId
			},
			setPackage() {
				let that = this;
				uni.setStorageSync('kuaidi-date', that.packageInfo)
				uni.navigateTo({
					url: '/kuaidi/package-info'
				})
			},
			setAddress(obj) {
				let that = this;
				let dateReadd = uni.getStorageSync('kuaidi-date')
				//console.log(dateReadd);
				switch (obj) {
					case 1:
						if (that.pingType == 1) {
							that.shippingInfo = {
								isSet: '1',
								...dateReadd
							}
							//console.log(dateReadd);
						} else {
							that.receivingInfo = {
								isSet: '1',
								...dateReadd
							}
						}
						if (that.shippingInfo.isSet && that.receivingInfo.isSet) {
							that.getKuaiList();
						}
						break;
					case 2:
						that.packageInfo = {
							...dateReadd
						}
						if (that.shippingInfo.isSet && that.receivingInfo.isSet) {
							that.getKuaiList();
						}
						break;
				}

			},
			openPopup() {
				let that = this;
				let arr = [{
					text: "09:00-11:00",
					value: "09:00-11:00",
				}, {
					text: "11:00-13:00",
					value: "11:00-13:00"
				}, {
					text: "13:00-15:00",
					value: "13:00-15:00",
				}, {
					text: "15:00-17:00",
					value: "15:00-17:00",
				}, {
					text: "17:00-19:00",
					value: "17:00-19:00",
				}]
				that.columnData = [];
				if (!that.timeComparison(17)) {
					let newArr = [...arr];
					that.timeComparison(9) && newArr.shift()
					that.timeComparison(11) && newArr.shift()
					that.timeComparison(13) && newArr.shift()
					that.timeComparison(15) && newArr.shift()
					let colDate = {
						text: "今天",
						value: "0",
						children: newArr
					}
					that.columnData.push(colDate);
				}
				that.columnData.push({
					text: "明天",
					value: "1",
					children: arr
				});
				that.columnData.push({
					text: "后天",
					value: "2",
					children: arr
				});
				that.isPicker = true;
				that.$refs.picker.show()
			},
			toAddPage(index) {
				let that = this;
				that.pingType = index;
				uni.navigateTo({
					url: '/pages/address/address?fromPage=kuaidi&type=0'
				})
			},
			bindChange(e) {
				//console.log(e)
				let that = this;
				let setDate = e.detail.value;
				that.currentIndex = [setDate[0].value,setDate[1].text];
				that.dateTime = setDate[0].text+','+setDate[1].text
				that.isPicker = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.top-header {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row;
	}

	.ico-img {
		width: 36rpx;
		height: 36rpx;
		padding: 0 20rpx;
	}

	.openvip {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		background: #000;
		color: #FFFF00;
		float: left;
		width: 144rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}

	.container {
		width: 95%;
		margin: 0 auto;
		padding-bottom: 240rpx;
	}

	.tab-box {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #fff;
		color: #9d9d9d;
		font-size: 32rpx;
		overflow: hidden;

		.tab {
			flex: 1;
		}

		.active {
			background-color: #0396ff;
			color: #fff;
			font-weight: 600;
		}
	}

	.mail-info {

		.sending,
		.receiving {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 36rpx 0;

			.icon {
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 50%;
				font-size: 32rpx;
				margin: 0 40rpx;
				color: #fff;
			}

			.basic {
				color: #000;
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			.address {
				font-size: 28rpx;
				color: #9d9d9d;
			}

			.book {
				display: flex;
				flex-direction: column;
				align-items: center;
				row-gap: 10rpx;
				padding: 0 34rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #666666;
				border-left: 2rpx solid #eeeeee;

				._icon-delete-o {
					font-weight: normal;
					color: #9d9d9d;
				}
			}
		}

		.sending {
			.icon {
				background-color: #0396ff;
			}
		}

		.receiving {
			.icon {
				background-color: #000000;
			}
		}
	}

	.tip {
		font-size: 24rpx;
		color: #999999;
	}

	.add-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #000;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-weight: 600;
		border-radius: 20rpx;
	}

	.package-box {
		&.package1>.ss-flex {
			margin-bottom: 40rpx;
		}

		&.package2>.ss-flex {
			padding: 30rpx 24rpx;

			&:last-child {
				border-top: 2rpx solid #eeeeee;
			}
		}

		.label {
			color: #2c2c2c;
			font-size: 32rpx;

			.require {
				color: red;
				font-size: 24rpx;
			}
		}

		.option {
			color: #000;
			font-weight: 600;
			font-size: 32rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding: 16rpx 10rpx 60rpx 30rpx;

		.price {
			color: red;
			margin-bottom: 6rpx;
		}

		.agreement {
			color: #999999;

			:deep(.checklist-box) {
				margin: 0;
			}

			.blue {
				color: #4791ff;
			}
		}

		.button {
			width: 300rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 36rpx;
			color: #fff;
			border-radius: 88rpx;
			background-color: #0396ff;
			outline: none;
			border: none;
		}
	}

	.express-delivery {
		padding: 40rpx 30rpx;
		font-size: 32rpx;
		color: #000000;

		.title {
			margin-bottom: 40rpx;

			.tip {
				font-size: 28rpx;
			}
		}

		&-list {
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
		}

		&-item {
			position: relative;
			padding: 25rpx 30rpx;
			background-color: #f5f8ff;
			border: 2rpx solid transparent;
			border-radius: 20rpx;
			overflow: hidden;

			&.active {
				border-color: #0396ff;

				.selected {
					visibility: visible;
				}
			}

			.baseline {
				align-items: baseline;
			}

			.selected {
				position: absolute;
				right: 0;
				top: 0;
				color: #fff;
				background-color: #0396ff;
				border-bottom-left-radius: 16rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				visibility: hidden;
				font-size: 24rpx;
			}

			.logo {
				width: 40rpx;
				height: 40rpx;
				border-radius: 10rpx;
			}

			.name,
			.tip,
			.original {
				margin-left: 10rpx
			}

			.price {
				color: red;

				.num {
					font-size: 40rpx;
					font-weight: 600;
				}
			}

			.priceMore {
				font-size: 24rpx;
				color: #999999;
				margin-left: 10rpx;

				.red {
					color: red;
				}
			}

			.original {
				font-size: 30rpx;
				font-style: oblique;
				text-decoration: line-through;
				color: #6b6968;
				font-weight: 600;
			}

			.tags {
				display: inline-flex;
				color: #ff6600;
				font-size: 24rpx;

				.tag {
					padding: 4rpx 10rpx;
					border: 2rpx solid #ff6600;
					border-radius: 30rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.card {
		border-radius: 20rpx;
		background-color: #fff;
	}

	.p-4 {
		padding: 30rpx !important;
	}

	.my-3 {
		margin-top: 20rpx !important;
		margin-bottom: 20rpx !important;
	}

	.pr-2 {
		padding-right: 10rpx !important;
	}

	.ss-flex-col {
		display: flex;
		flex-direction: column;
	}

	.ss-flex-1 {
		flex: 1;
	}

	.p-3 {
		padding: 20rpx !important;
	}

	.ss-row-between {
		justify-content: space-between;
	}

	.ss-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>